


<template>
  <div :class="['LiuYuanView',showOrHideCls]">
    <div class="back">
      <div class="top"></div>
      <div class="zhong">
        <div class="btndiv">
          <div class="item" @click="btnClick(Enum.startPath)"><span class="s1">网站首页</span> <div class="s2">/</div></div>
          <div class="item" @click="btnClick(Enum.pinPaiJSPath)"><span class="s1">品牌介绍</span> <div class="s2">/</div></div>
          <div class="item" @click="btnClick(Enum.tesecpPath)"><span class="s1">特色菜品</span> <div class="s2">/</div></div>
          <div class="item" @click="btnClick(Enum.mendfcPath)"><span class="s1">门店展示</span> <div class="s2">/</div></div>
          <div class="item" @click="btnClick(Enum.hezzxPath)" ><span class="s1">合作中心</span> <div class="s2">/</div></div>
          <div class="item" @click="btnClick(Enum.ppzixuPath)"><span class="s1">品牌资讯</span> <div class="s2">/</div></div>
          <div class="item" @click="btnClick(Enum.lxwomPath)"><span class="s1">联系我们</span> <div class="s2"></div></div>
        </div>
        <ul class="btnul">
          <li class="li1"><span class="s1">友情链接:</span> </li>
          <li class="li2" @click="btnClick2('http://www.iqiju.com/')"><span class="s1">齐聚科技</span> </li>
          <li class="li2" @click="btnClick2('https://www.guagua.cn/')"><span class="s1">呱呱社区</span> </li>
          <li class="li2" @click="btnClick2('http://jklinkage.com/')"><span class="s1">齐齐直播</span> </li>
        </ul>
      </div>
      <div class="bottom">
        版权所有：山葵说（深圳）餐饮管理有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;粤ICP备2023114392号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;创业有风险，投资需谨慎
      </div>
    </div>
    <div class="view">
      <div class="left">
          <div class="txt1">山葵说(深圳)餐饮管理有限公司</div>
          <div class="txt2">Shankui Shuo (Shenzhen) Catering Management Co., Ltd</div>
          <div class="txt3">地址：深圳市福田区福田街道福安社区福华三路168号国际商会中心2703 </div>

        <div class="txt1" style="padding-top: 20px;">北京巨想食餐饮管理有限公司</div>
        <div class="txt2">Beijing Juxiangshi Catering Management Co., Ltd</div>
        <div class="txt3">地址：北京市朝阳区广渠路98号J7栋 </div>

          <div class="txt4">
            <img src="img/bottom/dh.png">
            <p>合作热线</p>
          </div>
          <div class="dhtxt5">400-8858-373</div>
          <div class="ma">
            <img class="item" src="img/bottom/ma.png">
          </div>
      </div>
      <div class="right">
        <div class="title">
          <img src="img/bottom/t1.png">
        </div>

        <div class="xinxDiv">
          <div class="txt">您的姓名</div>
          <div class="con">
            <input autocomplete="off" class="inputCode" type="text"  id="refinputname"   ref="refinputname" placeholder='请输入姓名' @input="handlerchangeName" :value="store.state.bottomData.name">
          </div>
        </div>
        <div class="xinxDiv">
          <div class="txt">您的电话</div>
          <div class="con">
            <input autocomplete="off" class="inputCode" type="text"  id="refinputphone"   ref="refinputphone" placeholder='请输入电话'
                   @keypress="onlyNumbers"  @input="handlerchangePhone" :value="store.state.bottomData.phone">
          </div>
        </div>
        <div class="xinxDiv">
          <div class="txt">意向区域</div>
          <div class="con">
            <input autocomplete="off" class="inputCode" type="text"  id="refinputquyu"   ref="refinputquyu" placeholder='请输入区域' @input="handlerchangeQuyu" :value="store.state.bottomData.quyu">
          </div>
        </div>
        <div class="xinxDiv" style="padding-bottom: 28px;">
          <div class="txt">留言内容</div>
          <div class="con">
            <!--
            <textarea autocomplete="off" class="inputliuy" type="text"    ref="refliuy" placeholder='留言内容' @input="handlerchangeLiuy" :value="store.state.bottomData.con"></textarea>
            -->
            <input autocomplete="off" class="inputliuy" type="text"  id="refliuy"   ref="refliuy" placeholder='留言内容' @input="handlerchangeLiuy" :value="store.state.bottomData.con">
          </div>
        </div>
        <div class="tijiaoBTn" @click="tijiaoBTnClick()">提交</div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.LiuYuanView{
  position:relative;width: 100%;height: 570px;
}
.back{
  position: absolute;width: 100%;height: 100%;
}
.back .top{
  width: 100%;height: 450px;background-color: #84AE49;
}
.back .zhong{
  width: 100%;height: 80px;background-color: #252524; display:flex;display: -webkit-flex;align-items: center;flex-direction:column;
}
.back .zhong .btndiv{
  position: relative;width: 100%;font-weight: normal;font-size: 14px;color: #FFFFFF;max-width: 1200px;margin: auto;
  display:flex;display: -webkit-flex;flex-direction:row;justify-content:space-around;
}
.back .zhong .btndiv .item{
  line-height:20px;cursor: pointer;width: 171px;position: relative;text-align: center;
}

.back .zhong .btndiv .item .s1{

}
.back .zhong .btndiv .item .s2{
 position: absolute;right: 0;top:0px;
}

.back .zhong .btnul{
  position: relative;width: 100%;font-weight: normal;font-size: 14px;color: #FFFFFF;max-width: 1200px;margin: auto;
  display:flex;display: -webkit-flex;flex-direction:row;justify-content:center;
}
.back .zhong .btnul .li1{
  width:100px;
}
.back .zhong .btnul .li2{
  width:120px;    cursor: pointer;
}

.back .bottom{
  width: 100%;height: 40px;background-color: #181818;
  font-weight: normal;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 40px;
}
.view{
  position:relative;left: 0;top:0;max-width: 1200px;width: 1200px;margin: auto;height: 450px;
  display:flex;display: -webkit-flex;flex-direction:row;
}
.view .left{
  position: relative;width: 50%;text-align: left;margin-top: 40px;margin-left: 70px; color: #FFFFFF;
}
.view .left .txt1{
  font-weight: normal;font-size: 22px;line-height: 26px;
}
.view .left .txt2{
  font-size: 12px;line-height: 20px;opacity: 1;
}
.view .left .txt3{
  font-size: 14px;line-height: 25px;opacity: 1;
}
.view .left .txt4{
  display:flex;display: -webkit-flex;flex-direction:row;padding-top: 10px;
}
.view .left .txt4  p{
  line-height: 44px; opacity: 1;padding-left: 10px;    font-size: 16px;
}
.view .left .txt4 img{
  width: 22px;height: 22px;padding-top: 11px;
}

.view .left .dhtxt5{
  font-weight: 400;font-size: 38px;line-height: 40px;
  font-family: Alimama DongFangDaKai;
}

.view .left .ma{
  width: 100%;padding-top: 15px;
  display:flex;display: -webkit-flex;flex-direction:row;
}
.view .left .ma .item{
  width: 120px;height: 120px;
}

.view .right{
  position: relative;width: 50%;padding-top: 35px;
}
.view .right .title{
  width: 240px;height: 91px;margin: auto;padding-bottom: 30px;
}
.view .right .title img{
  width: 240px;height: 91px;
}

.view .right .xinxDiv{
  display:flex;display: -webkit-flex;flex-direction:row;justify-content:center;padding-bottom: 17px;
}
.view .right .xinxDiv .txt{
  position: relative;color: #FFFFFF;line-height: 30px;padding-right: 10px;
}
.view .right .xinxDiv .con{
  background-color: #E7EED1;width: 380px;height: 30px;border-radius:25px;
}
.inputCode{
  background-color:transparent;position:relative;width: 100%;height: 100%;text-align: left;
  outline:none;font-weight: 400;color: #242424;padding-left: 10px;
}
.inputliuy{
  background-color:transparent;position:relative;width: 100%;height: 100%;text-align: left;
  outline:none;font-weight: 400;color: #242424;padding-left: 10px;border: none;line-height: 30px;
  overflow: hidden;
}

.tijiaoBTn{
  position: relative;background-color: #F3F3A5;width: 160px;height: 36px;border-radius:18px;line-height: 36px;color: #2C483A;
  margin: auto;cursor: pointer;
}
</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import Enum from "@/js/Enum";

let store = useStore();


onMounted(() => {
  console.log("LiuYuanView onMounted 留言 初始化");

});


onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("LiuYuanView onUnmounted 卸载组件实例后  ");
});
let showOrHideCls=ref('');
let refinputname=ref(null);
function handlerchangeName(evt){
  store.state.bottomData.name=refinputname.value.value;
 console.log("LiuYuanView handlerchangeName ",refinputname.value.value,);
}

let refinputphone=ref(null);let numericValue = ref(0);
function handlerchangePhone(evt){
  store.state.bottomData.phone=refinputphone.value.value;
  console.log("LiuYuanView handlerchangePhone ",refinputphone.value.value,);
}

let refinputquyu=ref('');
function handlerchangeQuyu(evt){
  store.state.bottomData.quyu=refinputquyu.value.value;
  console.log("LiuYuanView handlerchangeQuyu ",refliuy.value.value,);
}
let refliuy=ref(null);
function handlerchangeLiuy(evt){
  store.state.bottomData.con=refliuy.value.value;
  console.log("LiuYuanView handlerchangeLiuy ",refliuy.value.value,);
}
function onlyNumbers(event) {
  // 允许输入数字、小数点、负号
  let keyCode = event.keyCode === 0 ? event.which : event.keyCode;
  if (!(keyCode >= 48 && keyCode <= 57) && keyCode !== 46 && keyCode !== 189) {
    event.preventDefault();
  }
}

function tijiaoBTnClick(){
  console.log("LiuYuanView tijiaoBTnClick ");
  if(store.state.bottomData.name==''){
    winApp.sendNotification(Enum.VIEW_LabelNoticeView,'您的名字不能为空');
    return;
  }
  if(store.state.bottomData.phone==''){
    winApp.sendNotification(Enum.VIEW_LabelNoticeView,'您的电话不能为空');
    return;
  }
  if(store.state.bottomData.quyu==''){
    winApp.sendNotification(Enum.VIEW_LabelNoticeView,'您的区域不能为空');
    return;
  }
  if(store.state.bottomData.con==''){
    winApp.sendNotification(Enum.VIEW_LabelNoticeView,'您的留言不能为空');
    return;
  }
  sendSrsData();
}

function btnClick(url){
  console.log("LiuYuanView btnClick ");
  //store.update(url);
  store.commit('updatePages',url);
}

let btnClick2=(url)=>{
  window.open(url);
}

let sendSrsData=()=>{

    $.ajax({
      url: store.state.data_url+'api/saveIntention',
      type: 'POST',
      dataType: 'json',
      jsonp: "",
      cache: false,
      data: {"contactsName":store.state.bottomData.name,contactsPhone:store.state.bottomData.phone,
        contactsIntention:store.state.bottomData.quyu,contactsContent:store.state.bottomData.con},
      success: function(data) {

        console.log("LiuYuanView getChannelListById ",data);
        if(data.state==0 || data.state==207){
          store.state.bottomData.name='';store.state.bottomData.phone='';store.state.bottomData.quyu='';store.state.bottomData.con='';
        }
        winApp.sendNotification(Enum.VIEW_LabelNoticeView,data.message);
      },
      error: function(xhr, textStatus, errorThrown) {
        console.log("网络错误!");
      }
    });

}
</script>




